<h2>Filters<a href="#filters"></a></h2>

<h3>Filter by a group</h3>
<p>Use the <code>filter()</code> method. If, for example, you wanted to show only items that match <code>"space"</code>, you would do this:</p>

<div class="code-block">
  <pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter('space');</code></pre>
</div>

<h3>Filter by multiple groups</h3>
<p>Show multiple groups at once by using an array.</p>

<div class="code-block">
  <pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter(['space', 'nature']);</code></pre>
</div>

<p>By default, this will show items that match <code>space</code> <em>or</em> <code>nature</code>. To show only groups that match <code>space</code> <em>and</em> <code>nature</code>, set the <code>filterMode</code> option to <code>Shuffle.FilterMode.ALL</code>.</p>

<h3>Show all items</h3>
<p>To go back to having no items filtered, you can call <code>filter()</code> without a parameter, or use <code>Shuffle.ALL_ITEMS</code> (which by default is the string <code>"all"</code>).</p>

<div class="code-block">
  <pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter(Shuffle.ALL_ITEMS); // or .filter()</code></pre>
</div>

<h3>Overrides</h3>
<p>You can override both <code>Shuffle.ALL_ITEMS</code> and <code>Shuffle.FILTER_ATTRIBUTE_KEY</code> if you want.</p>

<div class="code-block">
  <pre rel="JavaScript"><code class="language-javascript">// Defaults
Shuffle.ALL_ITEMS = 'all';
Shuffle.FILTER_ATTRIBUTE_KEY = 'groups';

// You can change them to something else.
Shuffle.ALL_ITEMS = 'any';
Shuffle.FILTER_ATTRIBUTE_KEY = 'categories';</code></pre>
</div>

<p>Then you would have to use <code>data-categories</code> attribute on your items instead of <code>data-groups</code>.</p>
